
{% extends "layout.html" %}

{% block head %}
    {{super()}}

{% block copyright %}

{% endblock %}

{% endblock %}


 {% block left%}
    <style type="text/css">



        #box{
            display: flex;
            justify-content: space-between;
            height: 99vh;
            background: url('../static/images/index02.jpg') no-repeat  ;   /*加载背景图*/   /* 背景图不平铺 */
		   background-size: cover; /* 让背景图基于容器大小伸缩 */
        }
        #box div{
            z-index: 999;
            width: 25%;
        }
        #box .two{
            z-index: 999;
            width: 50%;
        }
        .left_box{
            z-index: 999;
            height:49%;
            width: 100% !important;
            padding:0;
            left: 50px;
        }
        #after{
            z-index: 9999;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 105%;
            background: url("../static/images/after.jpg");
            background-size: auto 100%;
            text-align: center;

        }
        #after p{

            position: absolute;
            top: 40%;
            width: 100%;
            //line-height: 400px;
            font-family:"楷体","楷体_GB2312";
            color: white;
            font-size: 35px;
            text-align: center;
        }
        #after a{
            font-family:"楷体","楷体_GB2312";
            cursor: pointer;
            color: white;
        }
        #after a:hover{

            color: #778899;
            font-size: 25px;
            transition: 0.2s;
            border:1px solid #778899;
        }
        #after span{
            font-family:"楷体","楷体_GB2312";
            opacity: 0.1;
            text-align: center;
        }
        #title{
            font-family:"楷体","楷体_GB2312";
            margin-top: 150px;
            color: white;
            font-size: 60px;
        }
        #go{
            border-radius: 10px;
            border:1px solid white;
            height: 30px;
            line-height:30px;
            text-align: center;
            width: 200px;
            color: #778899;
            font-size: 25px;
            position: fixed;
            right: 10%;
            bottom: 15%;
        }

        @media screen and (max-width:720px){
            #box{
                display: flex;
                justify-content: space-between;
                height: 99vh;
                background: url('../static/images/index02.jpg') no-repeat  ;   /*加载背景图*/   /* 背景图不平铺 */
               background-size: cover; /* 让背景图基于容器大小伸缩 */
            }

            #after{
                z-index: 9999;
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 105%;
                background: url("../static/images/after.jpg");
                background-size: auto 100%;
                text-align: center;

            }
            #after p{
                position: absolute;
                top: 35%;
                width: 100%;
                font-family:"楷体","楷体_GB2312";
                color: white;
                font-size: 25px;
                text-align: center;
            }
            #after a{
                font-family:"楷体","楷体_GB2312";
                cursor: pointer;
                color: white;
            }
            #after a:hover{
                color: #778899;
                font-size: 25px;
                transition: 0.2s;
                border:1px solid #778899;
            }
            #after span{
                font-family:"楷体","楷体_GB2312";
                opacity: 0.1;
                text-align: center;
            }
            #title{
                font-family:"楷体","楷体_GB2312";
                margin-top: 150px;
                color: white;
                font-size: 35px;
            }
            #go{
                border-radius: 10px;
                border:1px solid white;
                height: 30px;
                line-height:30px;
                text-align: center;
                width: 200px;
                color: #778899;
                font-size: 25px;
                position: absolute;
                bottom: 35%;
                left: 30%;
            }
            .two{
                position: absolute;
                left: -25%;
                top: 0px;
                width: 559px;
                height: 928px;
                user-select: none;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                padding: 0px;
                margin: 0px;
                border-width: 0px;
            }
        }
    </style>
    <div id="main">
        <div id="box">
            <div id="left">
                <div class="left_box" id="left1"></div>
                <div class="left_box" id="left2"></div>
            </div>
            <div class="two" id="china"></div>
            <div id="right"></div>
        </div>
    </div>
    <div id="after">
        <h1 id="title">全国招聘大数据分析系统</h1>
        <p>

            <span id="span1">本系统致力于对岗位进行分析</span>
            <br><br>
            <span id="span2">希望在这岗位五花八门的时代</span>
            <br><br>
            <span id="span3">能为您提高找工作的效率</span>
            <br><br>
            <span id="span4">希望您在本系统有个良好的体验</span>
        </p>
         <a id="go">进入</a>
    </div>


<!--</body>-->
<script src="../static/js/echarts.js"></script>
<script src="../static/js/china.js"></script>
<script src="https://www.makeapie.com/dep/echarts/map/js/china.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
            $("#span1").css("opacity",1);
            $("#span1").css("transition","all 2");
            $("#span2").css("opacity",1);
            $("#span2").css("transition","all 6s");
            $("#span3").css("opacity",1);
            $("#span3").css("transition","all 10s");
            $("#span4").css("opacity",1);
            $("#span4").css("transition","all 13s");
            $("#login").click(function(){
                $(location).attr('href', '/login');
            })
            $("#go").click(function(){
                $("#after").css("opacity",0);
                $("#after").css("transition","all 1s");
                $("#after").css("zIndex",-99);
            })
    })


	//图1
	var chart1 = echarts.init(document.getElementById('left1'));
    var colorArr=["#218de0", "#01cbb3", "#85e647", "#5d5cda", "#05c5b0", "#c29927"];
    var colorAlpha=['rgba(60,170,211,0.05)','rgba(1,203,179,0.05)','rgba(133,230,71,0.05)','rgba(93,92,218,0.05)','rgba(5,197,176,0.05)','rgba(194,153,39,0.05)']
    var option1 = {
        //backgroundColor:"#090e36",
        grid: {
            left: -100,
            top: 50,
            bottom: 10,
            right: 10,
            containLabel: true
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          show:false
        },

        polar: {},
        angleAxis: {
            interval: 1,
            type: 'category',
            data: [],
            z: 10,
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#0B4A6B",
                    width: 1,
                    type: "solid"
                },
            },
            axisLabel: {
                interval: 0,
                show: true,
                color: "#0B4A6B",
                margin: 8,
                fontSize: 16
            },
        },
        radiusAxis: {
            min: 20,
            max: 120,
            interval: 20,
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#0B3E5E",
                    width: 1,
                    type: "solid"
                },
            },
            axisLabel: {
                formatter: '{value} %',
                show: false,
                padding: [0, 0, 20, 0],
                color: "#0B3E5E",
                fontSize: 16
            },
            splitLine: {
                lineStyle: {
                    color: "#07385e",
                    width: 2,
                    type: "dashed"
                }
            }
        },
        calculable: true,
        series: [ {
            stack: 'a',
            type: 'pie',
            radius: '70%',
            roseType: 'radius',
            zlevel:10,
           startAngle: 100,
            label: {
                normal: {
                    formatter: [ '{b|{b}}','{d|{d}%}'].join('\n'),
                    rich: {
                        b: {
                            color: '#3bd2fe',
                            fontSize: 14,
                            lineHeight: 20
                        },
                        d: {
                            color: '#d0fffc',
                            fontSize: 14,
                            height: 20
                        },
                    },
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    length: 10,
                    length2: 5,
                    lineStyle: {
                    color: '#0096b1'

                    }
                },
                emphasis: {
                    show: false
                }
            },
            data: [
                {% for item in pie_data1 %}
                {
                    value: {{item['value']|safe}},
                    name: '{{item['name']|safe}}',
                    itemStyle: {
                      borderColor: colorArr[3],
                      borderWidth:2,
                      shadowBlur: 20,
                      shadowColor: colorArr[3],
                      shadowOffsetx: 25,
                      shadowOffsety: 20,
                      color:colorAlpha[3]
                        }
                },

                {% endfor %}
            ]
        }, ]
    }
    chart1.setOption(option1)

    //图2
    var chart2 = echarts.init(document.getElementById('left2'));
    // mock
    let data = [
            {% for key in pie_data2 %}
            {
                value: {{pie_data2[key]|safe}},
                name: '{{key|safe}}',
            },

            {% endfor %}
    ], xData = [], yData = []

    data.map(v => {
        xData.push(v.name)
        yData.push(v.value)
    })
    var option2 = {
        //backgroundColor: 'rgba(0,0,0,.5)',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985',
                    fontSize: 12
                },
            },
            textStyle: { fontSize: '100%' },
            formatter: v => {
                return `
                  <div class='u-p-2'>
                    <div class='fz-10'>学历：${v[0].axisValue}</div>
                    <div class='fz-10 u-mt-2'>岗位数：${v[0].value}</div>
                  </div>
                `
            }
        },
       xAxis: {
            type: 'category', boundaryGap: false, // 两边留白
            axisLabel: { textStyle: { color: '#fff', fontSize:14}},
            data: xData,
            axisLine: { lineStyle: { color:'#000', width:1}},
            splitLine: { lineStyle: { type: 'dashed', color: 'rgba(255,255,255,.2)',width:1}, show: true },
        },
        yAxis:{
            name:'岗位数', type: 'value', scale: true,
            nameTextStyle: { color:'rgba(255,255,255,.5)', align:'right', padding:[0,10,0,0], fontSize: '100%'},
            axisLabel: { textStyle: { color: '#fff', fontSize: '100%' }, margin: 8 },
            axisLine: { lineStyle: { color:'#000', width:1 }},
            splitLine: { lineStyle: { type: 'solid', color: 'rgba(255,255,255,.2)',width:1 }, show: true }
        },
        grid:{
            left: '15%'
        },
        series: {
            name: '', type: 'line', stack: '',
            // 修改的是线下区域的颜色
            areaStyle: { color:  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(236, 99, 123, .5)'
            }, {
                offset: 1,
                color: 'rgba(102, 212, 250,.0)'
            }])},
            // 修改的是线的颜色
            lineStyle: { color: {
                type: 'linear',x: 0, y: 1, x2: 0, y2: 0,
                // 0% 处的颜色                           // 100% 处的颜色
                colorStops: [{ offset: 0, color: '#3a76f6' },{ offset: .25, color: '#66d4fa' }, { offset: .75, color: '#f8d470'}, { offset: 1, color: '#ec637b'}],
                global: false // 缺省为 false
            },width:2},
            //图例样式，默认空心圆，设为none是实心，还有'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            symbol:'none',
            data: yData,
        }
    };
    chart2.setOption(option2);

    //图3
    var chart3 = echarts.init(document.getElementById('china'));
    var option3 = {
        title:{
            text: '全国招聘大数据分析系统',
            top: '5%',
            left: 'center',
            textStyle:{
                color:'#87CEEB',
                fontSize: '40',
                fontWeight: 'bolder'
            },
            subtext: '平均薪资情况',
            subtextStyle:{
                color:'#87CEEB',
                fontSize: '25',
                fontWeight: 'bolder'
            },
        },

        tooltip:{
            trigger: 'item',
            formatter: '点击进入该省<br>{a}<br>{b}:{c}元'

        },
        visualMap: {
            min: {{map_min|safe}},
            max: {{map_max|safe}},
            top: '65%',
            left: '15%',
            text: ['High', 'Low'],
            inRange: {
                color: ['#87CEEB', '#0000FF', '#191970']
            },
            textStyle: {
                 color: 'white',
            }
        },
        series:[
            {
                name: '平均薪资',
                map: 'china',
                type: 'map',
                data: {{map_data|safe}},
                label: {
                    normal: {
                        show: true,
                        fontSize: "14",
                        color: "white"
                    },
                    emphasis: {
                        show: true,
                        color: "#EEEE00",
                        fontSize: "18",
                        fontWeight: 'bolder'
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(147, 235, 248, 1)',
                        borderWidth: 1,
                        areaColor: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(128, 217, 248, 1)',
                        // shadowColor: 'rgba(255, 255, 255, 1)',
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10
                    },
                    emphasis: {
                        areaColor: '#87CEFA',
                        borderWidth: 0
                    }
                }
            },

        ]
    };
    chart3.setOption(option3);

    //图4
    var chart4 = echarts.init(document.getElementById('right'));
    var option4 = {
        //backgroundColor: '#000',
        tooltip:{
            trigger:'axis',
            axisPointer:{
                type: 'shadow'

            }
        },
        grid: [
            {
                height: "85%",
                top: 60,
                width: 300
            },
            {
                height: "85%",
                width: 300,
                top: 65
            }
        ],
        xAxis: [
            {
                position: 'top',
                splitNumber: 8,
                axisLine: {
                    lineStyle: {
                        color: '#10899A'
                    }
                },
                axisTick: {
                    show: true,
                    inside: true,
                    lineStyle: {
                        color: '#10899A',
                        fontSize: 14,
                        fontFamily: 'PingFangSC',
                        fontWeight: 300
                    }
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: (params)=>{
                        return '{marginTop|'+params+'}';
                    },
                    rich: {
                        marginTop: {
                            padding: [0, 0, 0, 0],
                            color: '#06D3CD',
                            fontSize: 10,
                            fontFamily: 'PingFangSC',
                            fontWeight: 300

                        }
                    }
                },
            },
            {
                gridIndex: 1,
                show: true,
                offset: 13,
                axisLine: {
                    lineStyle: {
                        color: '#10899A'
                    }
                }
            }
        ],
        yAxis: [{
            name: '城市',
            data: {{axis|safe}},
            axisLabel: {
                show: false
            },
            nameTextStyle: {
                color: '#06D3CD',
                fontSize: 14,
                fontFamily: 'PingFangSC',
                fontWeight: 300,
                padding: [0, 0, 8, 0]
            },
            axisLine: {
                lineStyle: {
                    color: '#10899A'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#10899A',
                    fontSize: 20,
                    fontFamily: 'PingFangSC',
                    fontWeight: 300
                }
            }

        },{
            gridIndex: 1,
            data: {{axis|safe}},
            position: 'left',
            nameTextStyle: {
                color: '#41a8f8',
                padding: [0, 0, 0,8],
                fontSize: 12,
                fontFamily: 'PingFangSC',
                fontWeight: 100
            },
            axisLabel: {
                formatter: (params)=>{
                    return '{marginTop|'+params+'}';
                },
                rich: {
                    marginTop: {
                        padding: [0, 0, 0, 0],
                        color: '#41a8f8',
                        fontSize: 14,
                        fontFamily: 'PingFangSC',
                        fontWeight: 100

                    }
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#10899A'
                }
            },
            splitLine: {
                show: false,
            }
        }],
        series: [{
            name: '平均薪资',
            type: 'bar',
            itemStyle: {
                barBorderRadius: 10,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#0bc4ac'
                    },
                    {
                        offset: 1,
                        color: '#41a8f8'
                    }
                ])
            },
            barWidth: 8,
            data: {{data|safe}}
        }]
    };
    chart4.setOption(option4);



    //点击事件,根据点击某个省份计算出这个省份的数据
    chart3.on('click', function (event) {
        $(location).attr('href', '/province?p='+event.name);
     });
     //点击事件,根据点击某个省份计算出这个省份的数据
    chart4.on('click', function (event) {
        $(location).attr('href', '/province?p='+event.name);
     });
</script>
  {% endblock %}



